<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>考勤分析</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容 -->
    <div id="nr1" class="clear">
      <!-- 卡片1 -->
      <div id="ka1">
        <div id="shang1" class="clear shang">
          <p> 本月考勤情况总览 </p>
          <div>
              <!-- 表单查询和筛选 -->
            <!-- <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >

            <el-select v-model="value1" multiple placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>

            <el-form-item label="活动时间">
                <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="formInline.date2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-form> -->
          </div>
        </div>
        <div id="xia1" class="clear">
            <div>
                <p>迟到（次）</p>
                <p>102</p>
            </div>
            <div>
                <p>打卡异常（次）</p>
                <p>34</p>
            </div>
            <div>
                <p>旷工（天）</p>
                <p>0</p>
            </div>
            <div>
                <p>年假（天）</p>
                <p>4</p>
            </div>
            <div>
                <p>加班（时）</p>
                <p>432</p>
            </div>
            <div>
                <p>病假（时）</p>
                <p>0</p>
            </div>
            <div>
                <p>事假（时）</p>
                <p>0</p>
            </div>
            <div>
                <p>女生假（人）</p>
                <p>5</p>
            </div>
            <div>
                <p>婚假（人）</p>
                <p>1</p>
            </div>
            <div>
                <p>产假（人）</p>
                <p>0</p>
            </div>
            <div>
                <p>陪产假（人）</p>
                <p>5</p>
            </div>
        </div>
      </div>
      <!-- 卡片2 -->
      <div id="ka2">
          <div id="shang2" class="clear shang">
            <p> 本月考勤情况总览 </p>
            <div>
                <!-- 表单查询和筛选 -->
              <!-- <el-form
                :inline="true"
                :model="formInline2"
                class="demo-form-inline"
              >
              <el-form-item label="活动时间">
                  <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date3" style="width: 100%;"></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                  <el-time-picker type="data" placeholder="选择时间" v-model="formInline.date4" style="width: 100%;"></el-time-picker>
                  </el-col>
              </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>
              </el-form> -->
            </div>

          </div>
          <div id="xia2" class="clear">
            <!-- 柱状图 -->
              <div style="width:60%;height:480px;" id="main"></div>

              <!-- 卡片 -->
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>员工迟到次数top7</span>
                </div>
                <div v-for="(o,i) in ranking" :key="o" class="text item kapian">
                  <div class="ranking2">
                    {{i+1}}
                  </div>
                  {{o}}
                </div>
              </el-card>
          </div>
      </div>
      <!-- 卡片3 -->
      <div id="ka3">
          <div id="shang3" class="clear shang">
            <p> 考勤概括 </p>
            <div>
                <!-- 表单查询和筛选 -->
              <!-- <el-form
                :inline="true"
                :model="formInline2"
                class="demo-form-inline"
              >
              <el-form-item label="活动时间">
                  <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date3" style="width: 100%;"></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                  <el-time-picker type="data" placeholder="选择时间" v-model="formInline.date4" style="width: 100%;"></el-time-picker>
                  </el-col>
              </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>
              </el-form> -->
            </div>
          </div>
          <div id="xia3">
              <!-- 表格 -->
              <template>
                <el-table :data="tableData2" stripe style="width: 100%">
                  <el-table-column prop="work_id" label="工号"></el-table-column>
                  <el-table-column prop="name" label="姓名"></el-table-column>
                  <el-table-column prop="status" label="迟到(次)"></el-table-column>
                  <el-table-column prop="id" label="打卡异常(次)"></el-table-column>
                  <el-table-column prop="account" label="旷工(次)"></el-table-column>
                  <el-table-column prop="id" label="加班(时)"></el-table-column>
                  <el-table-column prop="id" label="调休(时)"></el-table-column>
                  <el-table-column prop="id" label="病假(时)"></el-table-column>
                  <el-table-column prop="id" label="事假(时)"></el-table-column>
                  <el-table-column prop="id" label="年假(天)"></el-table-column>
                  <el-table-column prop="id" label="外勤(时)"></el-table-column>
                  <el-table-column prop="id" label="婚假(天)"></el-table-column>
                  <el-table-column prop="id" label="产假(天)"></el-table-column>
                  </el-table>
              </template>
              <!-- 分页 -->
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalPage"
                >
                </el-pagination>
              </div>
          </div>
      </div>

    </div>
  </div>
</template>


<script>
// 引入echarts
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
]);

// 引入axios
import axios from 'axios'


export default {
  data: function () {
    return {
      //员工排名
      ranking:['小伍','中伍','大伍','伍大','伍二','伍三','伍四'],

      formInline: {     //查询的表单的数据
          data1:"",
          data2:""
      },
      formInline2: {     //查询的表单的数据
          data3:"",
          data4:""
      },

      tableData: [],    //渲染请求后返回的数据的容器
      tableData2:[],    //渲染当前页的数据
      tableData3:[],    //原始数据，用于重置
      currentPage4: 1,   //当前页码
      mytotal:1,         //总条数
      myval:5,           //当前页条数
      
      //多选选项
      options: [{
        value: '1',
        label: '人事部'
      }, {
        value: '2',
        label: '行政部'
      }, {
        value: '3',
        label: '财务部'
      }, {
        value: '4',
        label: '销售部'
      }, {
        value: '5',
        label: '市场部'
      }],
      // 多选的值
      value1: []
    };
  },
  methods: {
    // 点击搜索
    onSubmit() {
      console.log("submit!");
    },
    // 转换时间的函数
    transferTime(time){
      if(time){
        var d = new Date(time);
        var date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        return date;
      }else{
        return "";
      }
    },

    //分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.myval = val;
        this.RenderData(this.currentPage4,this.myval);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = val;
        this.RenderData(this.currentPage4,this.myval);
    },

    // 渲染的函数
    RenderData(num,num2){
        this.tableData2 = this.tableData.slice((num-1)*num2,num*num2);
    }
  },

//计算
  computed: {
    // 监督总条数
    totalPage(){
      if (this.tableData!=undefined) {
        console.log(this.tableData.length);
          return this.mytotal =  this.tableData.length;
      }
    }
  },


// 指定图表的配置项和数据
  mounted:function(){
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
        title: {
          text: '部门迟到情况TOP9'
        },
        tooltip: {},
        legend: {
          data: ['迟到']
        },
        xAxis: {
          data: ['产品部', 'XXXXX部', '测试部', 'XXXXX部', '销售部', 'XXXXX部']
        },
        yAxis: {},
        series: [
          {
            name: '迟到',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
       myChart.setOption(option);
  },
//钩子函数
  // 页面加载就渲染
  created:function(){
    axios({
      method: 'get',
      url:'/atten/Atten_analysis_render',
    }).then((res)=>{
      console.log(res.data[0].status);
      for (let i = 0; i < res.data.length; i++) {
          if(res.data[i].status=="迟到"){
              res.data[i].status = 1;
              res.data[i].account = 0;
          }else if(res.data[i].status=="早退"){
              res.data[i].account = 1;
              res.data[i].status = 0
          }else{
            res.data[i].status = 0;
            res.data[i].account = 0;
          }
      }
      this.tableData = res.data;
      // 将数据里面的id改成0
      for (let x = 0; x < this.tableData.length; x++) {
          this.tableData[x].id = 0;        
      }
      // 将数据备份一个
      for (let i = 0; i < res.data.length; i++) {
          this.tableData3.push(res.data[i]);
      }
      this.RenderData(this.currentPage4,this.myval);
    })
  }

};
</script>
<style scoped lang="less">
.clear::after {
  display: block;
  content: "";
  clear: both;
}
#nr1 {
  background-color: #fff;
  margin-top: 20px;
  padding: 0 24px;
  padding-bottom: 24px;
  .el-menu-item:first-child {
    margin-left: 24px;
  }
}
.fenge {
  height: 1px;
  background-color: #e5e5e5;
  padding: 0 24px;
  margin-bottom: 24px;
}
.el-form {
  padding: 0 24px;
  padding-top: 24px;
}
.line {
  text-align: center;
}

.el-form-item:not(:first-child) {
  margin-left: 24px;
}
.el-form-item:nth-child(4) {
  margin-left: 0px;
}
.block {
  margin-top: 24px;
  float: right;
}
.shang{
    p{
        float: left;
        line-height: 80px;
        font-size: 18px;
    }
    div{
        float: right;
        div{
            float: left;
        }
    }
}
#xia1{
    padding: 24px 36px;
    border: 1px solid #e5e5e5;
    div{
        width: 80px;
        height: 80px;
        float: left;
        border: 1px solid #e5e5e5;
        margin-left: 2%;
        text-align: center;
        padding-top: 12px;
        p:first-child{
            font-size: 12px;
            height: 32px;
        }
        p:last-child{
            font-size: 24px;
            line-height: 40px;
        }
    }
    // div:first-child{
    //     margin-left: 56px;
    // }
}
#xia2{
  padding-top: 24px;
}
#xia2>div{
  float: left;
}
#shang2{
  border-bottom: 1px solid #e5e5e5;
}

// 卡片
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 38%;
  }
  .el-card.is-always-shadow{
    box-shadow: none;
  }
  .kapian{
    border: none;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 18px;
    div{
      float: left;
    }
    div:first-child{
      width: 24px;
      height: 24px;
      background-color: rgb(240,242,245);
      text-align: center;
      line-height: 24px;
      border-radius: 50%;
      margin-right: 24px;
      
    }
  }
  #ka3{
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
  }
</style>
